<template>
	<view class="navTabBox">
		<!-- 标题数量小于5 -->
		<view class="shortTab" v-if="tabTitle.length <= 5">
			<!-- 导航栏 -->
			<view class="navTab">
				<view  v-for="(item, index) in tabTitle" :key="index" class="navTabItem " :style="index == tabClick ? `color:${textColor}` : 'color:#666666'" @click="navClick(index)">
					<view style="position: relative;">
						<view class="titleTxt"><text :class="index == tabClick ? 'text-blod':''"   v-show="item.text">{{ item.text }}</text></view>
						<text v-show="item.number">({{ item.number }})</text> 
						<image v-if="index == tabClick" class="typeactivescrow5"   src="../../../static/user/bg_line.png"></image> 
					</view>
				</view>
			</view>
		</view>
		<!-- 标题数量大于5 开启长导航栏模式 -->
		<view class="longTab" v-if="tabTitle.length > 5">
			<scroll-view scroll-x="true" style="white-space: nowrap; display: flex" scroll-with-animation :scroll-into-view="toView">
				<view
					:data-index="index"
					class="longItem"
					:style="index == tabClick ? `color:${textColor}` : 'color:#666666'"
					v-for="(item, index) in tabTitle"
					:key="index"
					:id="'id' + index"
					@click="longClick(index)"
				>
					<view style="position: relative;">
						<view class="titleTxt"><text :class="index == tabClick ? 'text-blod':''"   v-show="item.text">{{ item.text }}</text></view>
						<text v-show="item.number">({{ item.number }})</text> 
						<image v-if="index == tabClick" class="typeactivescrow"   src="../../../static/user/bg_line.png"></image> 
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'navTab',
	props: {
		tabTitle: {
			type: Array
		},
		textColor:{
			type: String,
			default: '#000'
		},
		clickColor: {
			type: String,
			default: 'red'
		},
		indexTab:{
			type:Number,
			default:0
		},
	},
	data() {
		return {
			tabClick: 0, //导航栏被点击
			isLeft: 0, //导航栏下划线位置
			toView: 'id0'
		};
	},
	watch:{
		indexTab: {
			handler(val) {
				if(val){ 
					this.longClick(val)
				}
			},
			immediate: true,
		}
	},
	onLoad() {
		
	},
	methods: {
		// 导航栏点击
		navClick(index=0) {
			// this.$parent.currentTab = index
			this.$emit('changeTab', index); //设置swiper的第几页
			this.tabClick = index; //设置导航点击了哪一个
			console.log('执行',this.tabClick)
		},
		longClick(index) {
			var tempIndex = index - 2;
			tempIndex = tempIndex <= 0 ? 0 : tempIndex;
			this.toView = `id${tempIndex}`; //动画滚动,滚动至中心位置
			this.tabClick = index; //设置导航点击了哪一个
			// const query = uni.createSelectorQuery().in(this);
			// query
			// 	.select('.longItem')
			// 	.boundingClientRect(data => {
			// 		let left = data.width;
			// 		this.isLeft = index * left * 2;
			// 	})
			// 	.exec();
			// this.isLeft = index * this.isLongWidth //设置下划线位置
			this.$emit('changeTab', index); //设置swiper的第几页
		}
	}
};
</script>

<style lang="scss" scoped> 
.typeactivescrow{
	display: block; 
	position: absolute;
	/* 将半圆放置在文本下方 */
	 margin-top: -12px;
	 margin-left: calc(50% - 20rpx);
	/* 完全居中 */
	width: 40rpx;
	/* 半圆的宽度 */
	height: 16rpx;
}
.typeactivescrow5{
	display: block; 
	position: absolute;
	/* 将半圆放置在文本下方 */
	 margin-top: 5px;
	 margin-left: calc(50% - 20rpx);
	/* 完全居中 */
	width: 40rpx;
	/* 半圆的宽度 */
	height: 16rpx;
}
.text-blod{
	font-weight: bold;
}
.navTabBox {
	width: 100vw;
	color: #000;
	.longTab {
		width: 100%; 
		.longItem {
			width: 20vw;
			height:120rpx;
			display: inline-block;
		    line-height: 120rpx;
			text-align: center;
		}
		.underlineBox {
			height: 5rpx;
			width: 20%;
			display: flex;
			align-content: center;
			flex-direction: row;
			justify-content: center;
			transition: 0.5s;
		}
	}
	.shortTab {
		width: 100%;
		.navTab {
			display: flex;
			flex-direction: row;
			width: 100%;
			height: 90rpx;
			position: relative;
			.navTabItem {
				display: flex;
				align-items: center;
				color: #949496;
				justify-content: center;
				width: 100%;
				font-size: 28rpx;
			}
		}
		.underlineBox {
			height: 5rpx;
			display: flex;
			align-content: center;
			justify-content: center;
			flex-direction: row;
			transition: 0.5s;
		}
	}
}
</style>
